<extend name="./Application/Home/View/Layouts/application.html"/>

<block name="css">
    <link rel="stylesheet" href="__PUBLIC__/assets/home/vendors/mobiscroll-master/css/mobiscroll.frame.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/home/vendors/mobiscroll-master/css/mobiscroll.scroller.css">
</block>
<block name="content">

    <section class="confirm">
        <h3>收货地址</h3>

        <dl class="address" id="chooseAddress" data-address="{{$address.id}}">
            <dt>姓名：{{$address.name}} &nbsp;&nbsp;&nbsp;&nbsp;电话：{{$address.tel}}</dt>
            <dd>地址：{{$address.area}} {{$address.address}}</dd>
        </dl>

        <p id="createAddress"><b class="fa fa-plus-circle"></b> 新增收货地址</p>

        <div class="address-form" style="padding-bottom: 14px; display: none;">
            <form action="">
                <div class="control">
                    <label>姓名</label>
                    <input name="name" id="name" type="text" placeholder="请填写收货人姓名"/>
                </div>

                <div class="control">
                    <label>电话</label>
                    <input name="tel" id="tel" type="text" placeholder="请填写收货人电话"/>
                </div>

                <div class="control">
                    <label>地区</label>
                    <input name="area" id="area" type="text" placeholder="请选择地区"/>
                </div>

                <div class="control">
                    <label>地址</label>
                    <input name="address" id="address" type="text" placeholder="请填写详细地址"/>
                </div>

                <p class="operate">
                    <a id="add_address" class="primary" href="">新增</a>
                    <a class="cancel" href="">取消</a>
                </p>
            </form>
        </div>

        <h3>购物清单</h3>

        <volist name="carts" id="cart">
            <dl class="good">
                <dt>
                    <img class="img-responsive" src="{{$cart.product.thumb}}" alt="产品图片"/>
                </dt>
                <dd>{{$cart.product.name}}</dd>
                <dd>
                    <span>x {{$cart.num}}</span> ¥ {{$cart.product.price}}元
                </dd>
            </dl>
        </volist>
        <p id="total">总金额：<span>¥</span> <span id="total-price">{{$total|number_format=###,2}} </span></p>

        <a href="javascript:;"><input class="submit" type="submit" value="我要下单"/></a>
    </section>

</block>

<block name="js">
    <script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.core.js"></script>
    <script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.frame.js"></script>
    <script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.scroller.js"></script>
    <script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.select.js"></script>
    <script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/i18n/mobiscroll.i18n.zh.js"></script>

    <script src="__PUBLIC__/assets/home/assets/js/areas.js"></script>
    <script type="text/javascript">
        $(function () {
            //显示新增地址
            $('#createAddress').click(function () {
                $(this).next().toggle();
            });

            //收起新增地址
            $('.cancel').click(function () {
                $(this).parents('.address-form').hide();
                return false;
            });

            //省市区插件
            $('#area').mobiscroll().scroller({
                theme: 'mobiscroll',
                lang: 'zh',
                display: 'top',
                fixedWidth: [100, 100, 100],
                onBeforeShow: function (inst) {
                    var areaList = new Areas();
                    inst.settings.wheels = [[areaList.getData(1), areaList.getData(inst._tempWheelArray[0]), areaList.getData(inst._tempWheelArray[1])]];
                },

                parseValue: function (val) {
                    return [110000, 110100, 110101];
                },

                validate: function (html, index, time, dir, inst) {
                    var areaList = new Areas();

                    if (index == 0) {
                        inst.settings.wheels[0][1] = areaList.getData(inst._tempWheelArray[0]);
                        inst.changeWheel([1]);

                        inst.settings.wheels[0][2] = areaList.getData(inst._tempWheelArray[1]);
                        inst.changeWheel([2]);
                    }

                    if (index == 1) {
                        inst.settings.wheels[0][2] = areaList.getData(inst._tempWheelArray[1]);
                        inst.changeWheel([2]);
                    }
                },

                formatValue: function (data) {
                    var areaList = new Areas();
                    return areaList.getNameById(data[0]) + ' ' + areaList.getNameById(data[1]) + ' ' + areaList.getNameById(data[2]);
                }
            });

            //新增地址
            $("#add_address").click(function () {
                var info = {
                    name : $("#name").val(),
                    tel : $("#tel").val(),
                    area : $("#area").val(),
                    address : $("#address").val(),
                };

                if(info.name.length < 5 || info.name.length > 20){
                    alert('用户名的长度必须在5-20之间');return false;
                }
                //手机号正则
                var mobile = /^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,6,7,8]{1}\d{8}$|^18[\d]{9}$/;
                if(!mobile.test(info.tel)){
                   alert('手机号格式不正确');return false;
                }

                $.post("{{:U('Order/order_address')}}",info,function (info) {
                    if(info.status == 1){
                        alert(info.msg);
                        $('.cancel').parents('.address-form').hide();
                    }else{
                        alert(info.msg);
                    }
                })
                return false;
            })

            //我要下单
            $(".submit").click(function () {
                var address_id = $("#chooseAddress").data('address');
                if (address_id == "") {
                    alert('请填写收货地址');
                    return false;
                }

                $.post("{{:U('store')}}",{address_id:address_id},function (info) {
                    if(info.status == 0){
                        alert(info.msg);
                        return false;
                    }else {
                        alert(info.msg);
                        location.href="confirm/id/"+info.id+".html"; //下单成功后跳到商城首页
                    }
                });
                return false;
            })

        });
    </script>
</block>
